<template>
  <div class="home">
    <div class="left" :class="{ 'is-collapse': isCollapse }">
      <div class="logo">
        <img src="@/assets/images/logo.png" alt="" />
        <span class="title" v-show="!isCollapse">晓寒后台管理系统</span>
      </div>
      <div class="menu">
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          background-color="00c6ff"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <el-icon><House /></el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><DataLine /></el-icon>
            <template #title>数据大屏</template>
          </el-menu-item>
          <el-sub-menu index="3" popper-class="sub-menu-popper">
            <template #title>
              <el-icon><Lock /></el-icon>
              <span>权限管理</span>
            </template>
            <el-menu-item index="3-1">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="3-2">
              <el-icon><Cpu /></el-icon>
              <template #title>
                <span>角色管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="3-3">
              <el-icon><Menu /></el-icon>
              <template #title>
                <span>菜单管理</span>
              </template></el-menu-item
            >
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><ShoppingBag /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="4-1">
              <el-icon><Goods /></el-icon>
              <template #title>
                <span>品牌管理</span>
              </template></el-menu-item
            >
            <el-menu-item index="4-2">
              <el-icon><Memo /></el-icon>
              <template #title>
                <span>属性管理</span>
              </template></el-menu-item
            >
            <el-menu-item index="4-3">
              <el-icon><Management /></el-icon>
              <template #title>
                <span>SPU管理</span>
              </template></el-menu-item
            >
            <el-menu-item index="4-4">
              <el-icon><Handbag /></el-icon>
              <template #title>
                <span>SKU管理</span>
              </template></el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </div>
    </div>
    <div class="right">
      <div class="header">
        <div class="header-left">
          <el-icon @click="isCollapse = !isCollapse">
            <Expand v-if="isCollapse" />
            <Fold v-else />
          </el-icon>
          <el-breadcrumb :separator-icon="ArrowRight" style="margin-left: 10px">
            <el-breadcrumb-item
              v-for="(item, index) in route.matched"
              :key="index"
              :to="{ path: item.path }"
              >{{ item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-right">
          <div class="button">
            <el-button type="default" :icon="Refresh" @click="handleRefresh" circle />
            <el-button type="default" :icon="FullScreen" @click="handleFullScreen" circle />
            <el-button type="default" :icon="Setting" @click="handleSetting" circle />
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar :src="userinfo?.avatar" />
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="body">
        <router-view></router-view>
      </div>
    </div>
    <el-drawer v-model="settingshow" title="主题设置" :with-header="false">
      <h3>主题设置</h3>
      <div class="settingbody">
        <div class="settingitem">
          <span>主题颜色：</span>
          <el-color-picker v-model="colorpicker" @change="handleColorChange" />
        </div>
        <div class="settingitem">
          <span>主题模式：</span>
          <el-switch
            v-model="darkmode"
            @change="handleDarkMode"
            active-text="暗黑"
            inactive-text="明亮"
          />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import useUserStore from '@/stores/user'
import {
  House,
  Expand,
  Fold,
  Refresh,
  ArrowRight,
  FullScreen,
  Setting,
  ArrowDown,
  DataLine,
  Lock,
  ShoppingBag,
  Goods,
  User,
  Cpu,
  Menu,
  Memo,
  Management,
  Handbag
} from '@element-plus/icons-vue'
import { useDark, useToggle } from '@vueuse/core'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
let activeMenu = ref('1')
const userinfo = ref(null)
const handleSelect = (key: string, keyPath: string[]) => {
  console.log('handleSelect', key, keyPath)
  switch (key) {
    case '1':
      router.push('/home/portal')
      sessionStorage.setItem('activeMenu', '1')
      break
    case '2':
      router.push('/echart')
      sessionStorage.setItem('activeMenu', '2')
      break
    case '3-1':
      router.push('/contol/user')
      sessionStorage.setItem('activeMenu', '3-1')
      break
    case '3-2':
      router.push('/contol/role')
      sessionStorage.setItem('activeMenu', '3-2')
      break
    case '3-3':
      router.push('/contol/menu')
      sessionStorage.setItem('activeMenu', '3-3')
      break
    case '4-1':
      router.push('/goods/brand')
      sessionStorage.setItem('activeMenu', '4-1')
      break
    case '4-2':
      router.push('/goods/attribute')
      sessionStorage.setItem('activeMenu', '4-2')
      break
    case '4-3':
      router.push('/goods/spu')
      sessionStorage.setItem('activeMenu', '4-3')
      break
    case '4-4':
      router.push('/goods/sku')
      sessionStorage.setItem('activeMenu', '4-4')
      break
    default:
      break
  }
}
const handleLogout = () => {
  userStore.logout()
  router.push({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } })
}
onMounted(async () => {
  await userStore.getinfo()
  userinfo.value = userStore.userinfo
  activeMenu.value = sessionStorage.getItem('activeMenu') || '1'
})
const isCollapse = ref(false)
const handleRefresh = () => {
  location.reload()
}
const handleFullScreen = () => {
  let full = document.fullscreenElement
  if (full) {
    document.exitFullscreen()
  } else {
    document.documentElement.requestFullscreen()
  }
}
const settingshow = ref(false)
const handleSetting = () => {
  settingshow.value = true
}

const colorpicker = ref('#0083ff')
const darkmode = ref(false)
//暗黑模式
const isDark = useDark()
const handleDarkMode = () => {
  const html = document.documentElement
  html.style.cssText = ''
  darkmode.value ? (html.className = 'dark') : (html.className = '')
  //修改侧边栏颜色
  const left = document.querySelector('.left')
  const header = document.querySelector('.header')
  darkmode.value ? (left.className = 'left dark') : (left.className = 'left')
  darkmode.value ? (header.className = 'header dark') : (header.className = 'header')

  useToggle(isDark)
}
//主题颜色
const handleColorChange = (color: string) => {
  colorpicker.value = color
  const html = document.documentElement
  html.style.setProperty('--el-color-primary', color)
  html.style.setProperty('el-button', color)
  html.style.setProperty('color', color)
}
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
  width: 100vw;
  display: flex;
  .is-collapse {
    width: 64px !important;
  }
  .left {
    width: 300px;
    height: 100%;
    background: $background-color;
    transition: all 0.3s;
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      & > img {
        object-fit: cover;
        width: auto;
        height: 100%;
        margin-top: 10px;
      }
      .title {
        font-size: 20px;
        font-weight: 600;
        margin-left: 10px;
      }
    }
    .menu {
      height: calc(100% - 70px);
      margin-top: 10px;
      .el-sub-menu .el-menu-item {
        margin-left: 25px;
      }
    }
  }
  .right {
    flex: 1;
    height: 100%;
    .header {
      height: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: $background-color;
      .header-left {
        flex: 1;
        display: flex;
        align-items: center;
        margin: 0 20px;
      }
      .header-right {
        display: flex;
        align-items: center;
        margin: 0 10px;
        justify-content: end;
        .button {
          margin-right: 10px;
        }
      }
    }
    .body {
      height: calc(100% - 60px);
    }
  }
}
</style>
